<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'right.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/styles.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>bootstrap/css/bootstrap.min.css">
	<%-- <link rel="stylesheet" type="text/css" href="<%=basePath %>bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css"> --%>
	
	<!-- <script type="text/javascript" src="js/jquery-2.0.0.js"></script> -->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>bootstrap/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="<%=basePath %>bootstrap/js/uniform/jquery.uniform.js"></script>
	<script type="text/javascript" src="<%=basePath %>bootstrap/js/datatables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>bootstrap/js/datatables/DT_bootstrap.js"></script>
	<script type="text/javascript" src="<%=basePath %>bootstrap/js/stilearn-base.js"></script>
	
	<script type="text/javascript" src="<%=basePath %>js/common/right.js"></script>
	
<style type="text/css">
.body {
	/**padding: 10px 10px;**/
	
}
.main {
	border-top: 1px solid #D3D3D3;
	margin: 0 0px 0 0;
	height: 98%;
	width: 100%;
}
.toolBar {
	height: 50px;
	line-height: 50px;
	background-color: #F3F3F3;
	border-bottom: 1px solid #D3D3D3;
	padding: 0 60px;
}
.bookTypeBar,.optionBar {
	border: 0px solid black;
	/* position: absolute; */
	margin:10px 10px 0 0;
	float: left;
}
.bookTypeBar button b {
	font-size: 14px;
}
.searchBar {
	/* border: 0px solid black; */
	/* position: absolute; */
	margin:10px 30px 10px 0;
	height:15px;
	line-height:15px;
	width:300px;
	float: right;
}
.toolBar-left {
	float: left;
	margin-left: 10px;
	font-size: 16px;
	font-weight: bold;
}
.toolBar-right {
	float: right;
	margin-right: 60px;
	font-weight: bold;
}
.contentBar {
	/* border: 1px solid #D3D3D3; */
	margin: 0px 0px;
	padding-left: 25px;
	height: 50px;
	line-height: 50px;
}
.content{
	border: 0px solid #D3D3D3;
	margin: 2px 5px 5px 5px;
	height: 86%;
} 
table {
	text-align: center;
}
table th{
	text-align: center;
}

/** 分页   */
#rollPage {
	border: 0px solid black;
	margin: 0 20px;
}
/* #rollPage_left {
	float: left;
} */
#rollPage_right {
	border: 0px solid red;
	float: right;
	height: 0px;
	padding: 0 0;
}
ul {
	position: relative; 
	top: -50px; 
	/* right: -160px; */
}


</style>
  </head>
  
 <body class="body">
 <div class="main">
	 <div class="toolBar">
	 	<!-- <div class="toolBar-left text-warning">接入指南</div>
	 	<div class="toolBar-right"><a href="javascript:;">返回</a></div> -->
	 	
	 	<span class="bookTypeBar"><button type="button" class="btn btn-success btn-sm"><b>推 荐</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>最 新</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>热 门</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	<span class="bookTypeBar"><button type="button" class="btn btn-link btn-sm"><b>Button</b></button></span>
	 	
	 	<!-- 按钮组 -->
	 	<!-- <div class="btn-group" data-toggle="buttons-radio">
                    <button class="btn btn-primary">Left</button>
                    <button class="btn btn-primary">Middle</button>
                    <button class="btn btn-primary">Right</button>
                  </div> -->
	 	
	 </div>
	 <div class="contentBar">
	 	<span class="optionBar"><button type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-star"></span>全选</button></span>
	 	<span class="optionBar"><button type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-star-empty"></span>反选</button></span>
	 	<span class="optionBar"><button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> 删除所选</button></span>
	 	<span class="searchBar">
		 	<!-- <div class="input-group">
			  	<input type="text" class="form-control" placeholder="Author/BookName">
			  	<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> 搜索</span>
			 </div> -->
			 <div class="input-group">
			 	<input type="text" class="form-control" palceholder="Author/Books" >
			 	<span class="input-group-btn">
			 		<button type="button" class="btn btn-success">
			 			<span class="glyphicon glyphicon-search"></span> 搜索
			 		</button>
			 	</span>
			 </div>
		</span>
	 	<!-- <span class="bookTypeBar"><button type="button" class="btn btn-danger btn-sm">button1</button></span> -->
	 </div>
	 <div class="content">
	 	<div>
	 	 <!--  <br><button class="btn btn-warning">Active</button> -->
	 	 <table class="table table-striped table-bordered table-hover">
	 	 	<thead>
	 	 		<tr>
	 	 			<th style="width: 6%;">选择</th>
		 	 		<th style="width: 24%;">username</th>
		 	 		<th style="width: 24%;">password</th>
		 	 		<th style="width: 24%;">starttime</th>
		 	 		<th style="width: 20%;">操作</th>
		 	 	</tr>
	 	 	</thead>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 	<tr>
	 	 		<td><input type="checkbox"></td>
	 	 		<td>name1</td>
	 	 		<td>pass2</td>
	 	 		<td>2013-11-12 1:45:08</td>
	 	 		<td>
	 	 			<button class="btn btn-info btn-sm">&nbsp;<span class="glyphicon glyphicon-search"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-warning btn-sm">&nbsp;<span class="glyphicon glyphicon-edit"></span>&nbsp;</button>&nbsp;
	 	 			<button class="btn btn-danger btn-sm">&nbsp;<span class="glyphicon glyphicon-trash"></span>&nbsp;</button>
	 	 		</td>
	 	 	</tr>
	 	 </table>
	 	</div>
	 	
	 	<div id="rollPage">
	 		<div id="rollPage_left">
			    <b>1&nbsp;/&nbsp;5&nbsp;   页</b>
			</div>	
			<div id="rollPage_right">
		 		<ul class="pager">
				  <li>
				    <a href="#">首 页</a>
				  </li>
				  <li>
				    <a href="#">上一页</a>
				  </li>
				  <li>
				    <a href="#">下一页</a>
				  </li>
				  <li>
				    <a href="#">末 页</a>
				  </li>&nbsp;&nbsp;
				  <span><b>跳到</b></span>
				  <li>
				    <input style="width:50px;" type="text" />
				  </li>
				  <span><b>页</b></span>
				  <li>
				    <a href="#">Go</a>
				  </li>
				</ul>
	 		</div>
	 	</div>
	 	
     </div>    
                                    
 </div>
 
</body>
</html>
